/**
 * 背景特效
 * 负责创建游戏背景的视觉效果
 */
class BackgroundEffects {
    constructor() {
        // 创建代码雨画布
        this.createCodeRain();
        
        // 初始化键盘特效
        this.initKeyboardEffect();
    }
    
    /**
     * 创建代码雨效果
     */
    createCodeRain() {
        // 创建画布
        const canvas = document.createElement('canvas');
        canvas.id = 'code-rain';
        document.body.appendChild(canvas);
        
        const ctx = canvas.getContext('2d');
        
        // 设置画布大小
        const resizeCanvas = () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        };
        
        // 监听窗口大小变化
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();
        
        // 代码雨字符
        const chars = '01ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        
        // 代码雨列
        const columns = Math.floor(canvas.width / 20);
        const drops = [];
        
        // 初始化每列的位置
        for (let i = 0; i < columns; i++) {
            drops[i] = Math.floor(Math.random() * -canvas.height);
        }
        
        // 绘制代码雨
        const draw = () => {
            // 半透明黑色背景，形成拖尾效果
            ctx.fillStyle = 'rgba(30, 39, 46, 0.05)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 设置文字样式
            ctx.fillStyle = '#3498db';
            ctx.font = '15px monospace';
            
            // 绘制每一列
            for (let i = 0; i < drops.length; i++) {
                // 随机选择一个字符
                const text = chars[Math.floor(Math.random() * chars.length)];
                
                // 绘制字符
                ctx.fillText(text, i * 20, drops[i] * 20);
                
                // 更新位置
                if (drops[i] * 20 > canvas.height && Math.random() > 0.975) {
                    drops[i] = 0;
                }
                
                drops[i]++;
            }
            
            // 循环动画
            requestAnimationFrame(draw);
        };
        
        // 开始动画
        draw();
    }
    
    /**
     * 初始化键盘特效
     */
    initKeyboardEffect() {
        // 监听键盘按下事件
        document.addEventListener('keydown', (event) => {
            // 创建键盘按键特效
            this.createKeyPressEffect(event.key);
        });
    }
    
    /**
     * 创建键盘按键特效
     * @param {string} key 按下的键
     */
    createKeyPressEffect(key) {
        // 只在开始界面显示特效
        const startScreen = document.getElementById('start-screen');
        if (startScreen.classList.contains('hidden')) {
            return;
        }
        
        // 创建特效元素
        const effect = document.createElement('div');
        effect.className = 'key-press-effect';
        effect.textContent = key.length === 1 ? key.toUpperCase() : '';
        
        // 随机位置
        const x = Math.random() * window.innerWidth;
        const y = Math.random() * window.innerHeight;
        
        // 设置样式
        effect.style.cssText = `
            position: fixed;
            left: ${x}px;
            top: ${y}px;
            font-size: ${Math.random() * 20 + 20}px;
            color: rgba(52, 152, 219, ${Math.random() * 0.5 + 0.5});
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 1000;
            animation: float-up 2s ease-out forwards;
        `;
        
        // 添加到页面
        document.body.appendChild(effect);
        
        // 动画结束后移除元素
        effect.addEventListener('animationend', () => {
            document.body.removeChild(effect);
        });
    }
}

// 添加浮动动画
const style = document.createElement('style');
style.textContent = `
@keyframes float-up {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -150%) scale(1.5);
    }
}
`;
document.head.appendChild(style);

// 初始化背景特效
document.addEventListener('DOMContentLoaded', () => {
    new BackgroundEffects();
}); 